<template>
    <div>
        <el-form :disabled="scene == 0 ? false : true" :inline="true" class="demo-form-inline">
            <el-form-item label="一级分类">
                <el-select v-model="category1Id" placeholder="请选择" @change="changeSelect1(category1Id)">
                    <el-option v-for="item in category1List" :label="item.name" :value="item.id" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select v-model="category2Id" placeholder="请选择" :disabled="category1Id ? false : true"
                    @change="changeSelect2(category2Id)">
                    <el-option v-for="item in category2List" :label="item.name" :value="item.id" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select v-model="category3Id" placeholder="请选择" :disabled="category2Id ? false : true"
                    @change="changeSelect3()">
                    <el-option v-for="item in category3List" :label="item.name" :value="item.id" :key="item.id">
                    </el-option>
                </el-select> 
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    props: [
        'scene'
    ],
    name: 'CategorySelector',
    data() {
        return {
            category1Id: '', // 选择的一级分类id
            category2Id: '', // 选择的二级分类id
            category3Id: '', // 选择的三级分类id
        }
    },
    mounted() {
        // 获取一级分类列表的数据
        this.$store.dispatch('getCategory1List')

    },
    computed: {
        ...mapState({
            category1List: (state) => state.category.category1List
        }),
        ...mapState({
            category2List: (state) => state.category.category2List
        }),
        ...mapState({
            category3List: (state) => state.category.category3List
        }),
    },
    methods: {
        // 点击一级分类列表
        changeSelect1(category1Id) {
            this.$store.dispatch('getCategory2List', category1Id)
            this.category2Id = ''
            this.category3Id = ''
        },
        // 点击二级分类列表
        changeSelect2(category2Id) {
            this.$store.dispatch('getCategory3List', category2Id)
            this.category3Id = ''
        },
        // 点击三级分类列表
        changeSelect3() {
            let { category1Id, category2Id, category3Id } = this
            this.$emit('get3Id', { category1Id, category2Id, category3Id })
        }
    },
    watch: {
        category3Id: function () {
            this.$store.dispatch('clearList')
        }
    }
}
</script>

<style scoped>

</style>